<template>
  <div>
      <Button type="success" @click="showAdd = true" :disabled="experimentadd">添加实验</Button>
      <Input suffix="ios-search" placeholder="Enter text" style="width: auto" 
        v-model="searchKey"
        @on-enter="search"/>
      <Table border ref="table" :columns="columns" :data="experimentList">
        <template slot-scope="{ index }" slot="index">
            {{index + 1}}
        </template>
        <template slot-scope="{ row, index }" slot="action">
            <Button type="primary" size="small" style="margin-right: 5px" 
              :disabled="experimentedit"
              @click="edit(row,index)">查看</Button>
            <Button type="error" size="small" 
              :disabled="experimentdel"
              @click="remove(row,index)">删除</Button>
        </template>
        <template slot-scope="{ row }" slot="createTime">
            {{row.createTime | moment}}
        </template>
        <template slot-scope="{ row }" slot="updateTime">
            {{row.updateTime | moment}}
        </template>
        <template slot-scope="{ row }" slot="status">
            <i-switch v-model="row.status" :disabled="true"></i-switch>  
        </template>
      </Table>
      <!-- 分页 -->
      <Page :total="total" :page-size="params.limit" @on-change="changPage"  v-if="update"></Page> 
      <!-- 添加实验弹框 -->
      <Modal
          v-model="showAdd"
          title="新增实验"
          @on-ok="okAdd"
          @on-cancel="cancelAdd">
          <Form :model="addExperimentInfo" :rules="addExperimentRule" ref="addForm">
              <FormItem prop="name" label="实验名称">
                  <Input v-model="addExperimentInfo.name"></Input>
              </FormItem>
          </Form>  
      </Modal> 

      <!-- 删除实验 -->
      <Modal v-model="showDelete" @on-cancel="cancel">
        <p slot="header" style="color:#f60;text-align:center">
            <Icon type="ios-information-circle"></Icon>
            <span>Delete {{curExperiment.name}}</span>
        </p>
        <div style="text-align:center">
            <p>该删除操作无法撤销</p>
            <p>确定删除？</p>
        </div>
        <div slot="footer">
            <Button type="error" size="large" long :loading="modal_loading" @click="delExperiment">Delete</Button>
        </div>
      </Modal>            
  </div>
</template>

<script>
export default {
  data(){
    return{
      userid:'',
      columns: [
        {
            title: '#',
            slot:'index',
            width:'60px',
            align: 'center'
        },
        // {
        //     title: 'ID',
        //     key: 'id',
        //     align: 'center'
        // },
        {
            title: '实验名称',
            key: 'name',
            align: 'center'
        },
        {
            title: '类型',
            key: 'type',
            align: 'center'
        },
        {
            title: '创建时间',
            key: 'createdTime',
            slot: 'createTime',
            align: 'center'
        },
        {
            title: '更新时间',
            key: 'updatedTime',
            align: 'center',
            slot: 'updateTime'
        },
        {
            title: '状态',
            key: 'status',
            align: 'center',
            slot:'status'
        },
        {
            title: '操作',
            slot:'action',
            align: 'center'
        }
      ],
      experimentList: [],
      //分页配置
      total:0,
      update:true,
      params:{
        page:1,
        limit:10,
        key:''
      },
      searchKey:'',
      // 添加实验
      showAdd:false,
      addExperimentInfo:{
        name:''
      },
      addExperimentRule:{
        name:[
          { required: true, message: 'Please fill in the name', trigger: 'blur' }
        ]
      },
      // 删除框配置
      showDelete:false,
      curExperiment:'',
      modal_loading: false,     
      //判断权限
      experimentadd:true,
      experimentedit:true,
      experimentdel:true,
    }
  },
  created(){
    let usermsg = JSON.parse(window.sessionStorage.getItem('usermsg'))
    this.userid = usermsg.id
    this.getExperimentList()
    //判断权限
    let temp = JSON.parse(window.sessionStorage.getItem('authorities'))
    for(let i = 0; i < temp.length; i++){
      temp[i] = JSON.parse(temp[i])
    }
    for(let i = 0; i < temp.length; i++){
      if(temp[i].authority == 'experiment:add'){
        this.experimentadd = false
      }
      if(temp[i].authority == 'experiment:edit'){
        this.experimentedit = false
      }
      if(temp[i].authority == 'experiment:del'){
        this.experimentdel = false
      }
    }
  },
  methods:{
    //获取实验数据
    async getExperimentList(){
      const {data:res}  = await this.$axios.get('/experiment/list/' + this.userid,{
        params:this.params
      })
      // console.log(res)
      this.experimentList = res.page.list
      this.total = res.page.totalCount
    },
    // 分页页数改变
    changPage(page){
      // console.log(page)
      this.params.page = page
      this.getExperimentList(this.params)
    },
    search(){
      this.params.key = this.searchKey.trim()
      this.getExperimentList(this.params)
    },
    // 添加实验
    async postExperimentName(name){
      this.addExperimentInfo.userId = this.userid
      const {data:res} = await this.$axios.post('/experiment/add', this.addExperimentInfo)
      // console.log(res)
      this.getExperimentList(this.params)
    },
    async okAdd () {
      if(!this.addExperimentInfo.name || !this.addExperimentInfo.name.trim().length){
        this.$Message.info('请填写实验名称');
        return
      }
      // 向后发送请求添加实验名称
      await this.postExperimentName(this.addExperimentInfo.name)
      this.addExperimentInfo.name = ''
    },
    cancelAdd () {
      this.addExperimentInfo.name = ''
    },
    // 编辑实验
    edit(row,index){
      // console.log(row,index)
      this.$router.push({path:'/admin/editexperiment', query:{
        experimentMsg:row
      }})
    },
    // 删除实验
    remove(row,index){
      this.curExperiment = row
      this.showDelete = true
    },
    async delExperiment(){
      this.modal_loading = true
      const {data:res} = await this.$axios.post('/experiment/delete/' + this.curExperiment.id)
      //重新获取数据
      this.params.page = 1
      this.getExperimentList(this.params) 
	    // 移除组件(组件强制刷新)
	    this.update = false
	    // 在组件移除后，重新渲染组件
	    // this.$nextTick可实现在DOM 状态更新后，执行传入的方法。
	    this.$nextTick(() => {
	        this.update = true
	    })  
      this.modal_loading = false
      this.showDelete = false
      this.curExperiment = {}   
      this.$Message.info(res.msg)
    },
    cancel(){
      this.curExperiment = {}
    },
  }
}
</script>

<style scoped>
  .ivu-btn-success{
    margin:1vh 1vw;
  }
  .ivu-page{
    margin-top:20px;
    text-align:center
  }
</style>